<template>
	<div class="container">
		<tabBar currentPage="/pages/my/index"></tabBar>
		<navigationBar title=" " :transparent="true" @leftClick="leftClick" mode="leftIcon"
			leftIcon="/static/icon/icon_gengduo2.png">
		</navigationBar>
		<div class="content">
			<div class="bg">
				<div class="bg-wrap"></div>
				<image v-if="userInfo.backgroundImage" class="bg-img" :src="userInfo.backgroundImage" mode="aspectFill">
				</image>
				<div class="tui-box" :style="'padding-top: ' + (navigationBarHeight+ 20) + 'px;'">
					<div class="tui-header-center">
						<image :src="userInfo.avatar" class="tui-avatar" mode="aspectFill" @click.native="upAvatar">
						</image>
						<div class="tui-info">
							<div class="tui-nickname">{{userInfo.nickname || ''}} </div>
							<div class="tui-explain">
								账号ID：{{userInfo.id || ''}}
							</div>
						</div>
					</div>
					<div class="nav-block-info">
						<div class="nav-item">
							<div class="left">
								<div class="txt">{{userInfo.introduction || '点击这里，填写简介'}}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="edit-nav">
					<div class="left">
						<div class="edit-item" @click="toFollowUser">
							<div class="edit-item-name">{{userInfo.followCount || 0}}</div>
							<div class="edit-item-desc">关注</div>
						</div>
						<div class="edit-item" @click="toFans">
							<div class="edit-item-name">{{userInfo.fansCount || 0}}</div>
							<div class="edit-item-desc">粉丝</div>
						</div>
						<div class="edit-item" @click="toNotificationLike">
							<div class="edit-item-name">9</div>
							<div class="edit-item-desc">获赞与收藏</div>
						</div>
					</div>
					<div class="right">
						<div class="edit-btn" @click="toUser">编辑资料</div>
						<div class="edit-img" @click="toSetting()">
							<image src="/static/icons/settting2.png" mode="aspectFill"></image>
						</div>
					</div>
				</div>

				<div class="order-tab">
					<div class="order-tab-wrap">
						<div class="order-item" v-for="(item,index) in orderList" :key="index" @click="toUrl(item.id)">
							{{item.name}}
						</div>
					</div>

				</div>
			</div>


			<div class="nav-tab">
				<div :class="['nav-item',current == 0?'active':'']" @click="changeItem(0)">笔记</div>
				<div :class="['nav-item',current == 1?'active':'']" @click="changeItem(1)">收藏</div>
				<div :class="['nav-item',current == 2?'active':'']" @click="changeItem(2)">赞过</div>
			</div>
			<div class="open-tab" v-if="current == 0">
				<div :class="['open-item',type == item.id?'active':''] " v-for="(item,index) in typeList" :key="index"
					@click="changeType(item)">
					{{item.name}}
				</div>
			</div>
			<listCard :list="list" :edit="type == 4" @longClick="longClick"></listCard>
		</div>
		<llx-popup ref="popup" position="left">
			<div class="nav-block" :style="'padding-top: ' + navigationBarHeight + 'px;'">
				<!-- <div class="nav-item" @click="handlerNav(0)">
					<div class="left">
						<image src="/static/icon/icon_shangjiaxinxi.png" alt="" style="width: 34upx;height: 34upx;" />
						<div class="txt">商家信息</div>
					</div>
					<image class="arrow" src="../../static/icon/icon_dianji.png" mode=""></image>
				</div> -->
				<div class="nav-item" @click="handlerNav(1)">
					<div class="left">
						<image src="/static/icon/icon_quan.png" alt="" style="width: 34upx;height: 34upx;" />
						<div class="txt">我的优惠券</div>
					</div>
					<image class="arrow" src="../../static/icon/icon_dianji.png" mode=""></image>
				</div>
				<div class="nav-item" @click="handlerNav(4)">
					<div class="left">
						<image src="/static/icons/address.png" alt="" style="width: 34upx;height: 34upx;" />
						<div class="txt">我的地址</div>
					</div>
					<image class="arrow" src="../../static/icon/icon_dianji.png" mode=""></image>
				</div>
				<div class="nav-item" @click="handlerNav(2)">
					<div class="left">
						<image src="/static/icons/mybank.png" alt="" style="width: 34upx;height: 34upx;" />
						<div class="txt">我的钱包</div>
					</div>
					<image class="arrow" src="../../static/icon/icon_dianji.png" mode=""></image>
				</div>
				<div class="nav-item" @click="handlerNav(3)">
					<div class="left">
						<image src="/static/icon/icon_xitong.png" alt="" style="width: 34upx;height: 34upx;" />
						<div class="txt">系统设置</div>
					</div>
					<image class="arrow" src="../../static/icon/icon_dianji.png" mode=""></image>
				</div>
			</div>
		</llx-popup>
	</div>
</template>

<script>
	import data from '@/js/my/index/data.js';
	import methods from '@/js/my/index/methods.js';
	import {
		mapState
	} from 'vuex';
	import navigationBar from '../../components/navigationBar.vue';
	import listCard from '@/components/list-card.vue';
	import llxPopup from '../../components/llx-popup.vue';
	export default {
		data,
		methods,
		onLoad() {

		},
		onShow() {
			this.getPageList()
			this.getUserInfo()
			// this.getServiceTel()
			// this.getNoticeList()
			// this.getCoupon()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.list = [];
			if (this.current === 0) {
				this.getPageList();
			} else if (this.current === 1) {
				this.getMyCollectList()
			} else if (this.current === 2) {
				this.getMyFavoriteList()
			}
			this.getUserInfo()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.getPageList()
		},
		onHide() {},
		computed: {
			...mapState(['navigationBarHeight', 'userInfo', 'refreshFlag']),
			bgHeight() {
				// #ifdef APP-PLUS
				return 250
				// #endif
				return this.navigationBarHeight + uni.upx2px(364);
			}
		},
		components: {
			navigationBar,
			listCard,
			llxPopup
		}
	};
</script>
<style>
	page,
	uni-page {
		background-color: #FAFAFA !important;
	}
</style>
<style scoped lang="scss">
	@import '~@/style/my/index.scss';
</style>